[#ftl] 
 [@define "agile.ClassEditor","agile._MetadataEditor"]
 	[#assign templateString]	
    <form style="background-color:#afeeee">	 		
 		<div data-dojo-type="agile.MultiItemEditor" data-dojo-attach-point="delegate" data-dojo-props='itemDelimeter:" "'>
 			{i18n_class_name}&nbsp;&nbsp;&nbsp;&nbsp;<div data-dojo-type="agile.NumberComboBox" class="editor" data-dojo-props="regExp:'^(\\s*|\\w+)$'"></div>
 		 	[#--<div data-dojo-type='dijit.form.CheckBox'  data-dojo-props="class:'applytoall',title:'apply to all other widgets of same type'"></div>--]
 	 	</div>	 
 	 </form> 
 	[/#assign]
 	templateString:"${templateString?js_string}"	
 	,name:"class",htmlName:"class"
 	,propertyNames:["class"]		
	 ,init:function(){
		 
		 this.delegate.watch("value",lang.hitch(this,function(name,old,value){
			this.onChange(value,this.name,this.htmlName);			
		}));
		 aspect.after(this.delegate.itemStore,"replaceItems",lang.hitch(this,"replaceClazz"),true);		 
		 aspect.after(this.delegate.itemStore,"removeItems",lang.hitch(this,"removeClazz"),true);
 	 } 	 
	,onChange:function(value,name,htmlName){	
//		console.log("ClassEditor##onChange:",value,name,htmlName);	
		if(this.context){
			var ownerWidget = this.context.getCurrentWidget();
//			console.log("ownerWidget:",ownerWidget);
			if(ownerWidget){		
				ownerWidget.metadata(this.metadataCategory+"."+htmlName,value);				
//				var nodes = ownerWidget.getStyleNodes(htmlName);
////				console.log("nodes:",nodes.length);
//				if(value){
//					for(var i = nodes.length-1; i >=0; i--){
//						if(!domClass.contains(nodes[i],value)){
//							domClass.add(nodes[i],value);
//						}
//					}			
//				}else{
//					for(var i = nodes.length-1; i >=0; i--){
//						if(domClass.contains(nodes[i],this.value)){
//							domClass.remove(nodes[i],this.value);
//						}
//					}
//				}
			}
		}		
	}
   ,replaceClazz:function(items){
	  // console.log("addOption",options);
		if(this.context && items){
			var ownerWidget = this.context.getCurrentWidget();
			if(ownerWidget){
				var nodes = ownerWidget.getStyleNodes(this.htmlName);
				for(var i = nodes.length-1; i >=0; i--){
					for(var j = items.length-1; j >=0; j--){							
						if(!domClass.contains(nodes[i],items[j].value)){
							domClass.add(nodes[i],items[j].value);
						}
					}
				}	
			}
		}		
   }
   ,removeClazz:function(items){
		if(this.context && items){
			var ownerWidget = this.context.getCurrentWidget();
			if(ownerWidget){
				var nodes = ownerWidget.getStyleNodes(this.htmlName);
				for(var i = nodes.length-1; i >=0; i--){
					for(var j = items.length-1; j >=0; j--){	
						if(domClass.contains(nodes[i],items[j].value)){
							domClass.remove(nodes[i],items[j].value);
						}
					}
				}	
			}
		}
   }
	,reset1:function(name,value){
		if(name == "value"){
			var clazz = value?value[this.htmlName]:null;
			if(clazz){
				clazz = clazz.split(" ");
				var items = [];
				array.forEach(clazz,function(c){
					items.push({key:c,value:c});
				});
				this.delegate.reset1("value",items);
			}else{
				this.delegate.reset1("value","");
			}			
		}else{
			this.inherited(arguments);
		}
	}
 [/@]